#{extends 'main.html' /}
#{set title:'Home' /}

<h2 class="ui-widget-header ui-widget ui-corner-all">&{'application.title'}</h2>

<div id="tabs" class="ui-widget-content ui-corner-all">
	<ul>
		<li><a href="#tabs-mod">&{'tabs.modules'}</a></li>
		<li><a href="#tabs-rep">&{'tabs.repositories'}</a></li>
	</ul>
	<div id="tabs-mod">
		<table id="menu-mod">
			<tr>
				<td>
					#{form @Modules.create()}
					<button id="new" class="button leave">&{'button.create'}</button>
					#{/form}
				</td>
				<td>
					 <button id="button" rel="@{Modules.delete()}" class="button opmod delete">&{'button.delete'}</button>
				</td>
				<td>
					#{form @Modules.show()}
					<button id="button" class="button opmod leave">&{'button.edit'}</button>
					#{/form}
				</td>
			</tr>
		</table>
		<br>
		<div id="accordion-mod" class="accordion">
		#{list items:_modules, as:'module'}
			<h4><a href="#">${module.name}</a></h4>
			<div rel="${module.id}" pos="${module_index - 1}">
				<table cellspacing="0">
					<tr>
						<td width=150></td>
					</tr>
					<tr>
						<td>&{'module.fullname'}:&nbsp;</td><td>${module.fullname}</td>
					</tr>
					<tr>
						<td>&{'module.license'}:&nbsp;</td><td>${module.license}</td>
					</tr>
					<tr>
						<td>&{'module.versions'}:&nbsp;</td>
						<td>
						#{list items:module.versions, as:'version'}
							#{if version.isDefault}
							<b>
							#{/if}
							${version.version}
							#{if version.isDefault}
							</b>
							#{/if}
							&nbsp;
						#{/list}
						</td>
					</tr>
				</table>
			</div>
		#{/list}
		</div>
	</div>
	<div id="tabs-rep">
		<table id="menu-rep">
			<tr>
				<td>
					#{form @Repositories.create()}
					<button id="new" class="button leave">&{'button.create'}</button>
					#{/form}
				</td>
				<td>
					 <button id="button" rel="@{Repositories.delete()}" class="button oprep delete"">&{'button.delete'}</button>
				</td>
				<td>
					#{form @Repositories.show()}
					<button id="button" class="button oprep leave">&{'button.edit'}</button>
					#{/form}
				</td>
			</tr>
		</table>
		<br>
		<div id="accordion-rep" class="accordion">
		#{list items:_repositories, as:'repository'}
			<h4><a href="#">${repository.name}</a></h4>
			<div rel="${repository.id}" pos="${repository_index - 1}">
				<table cellspacing="0">
					<tr>
						<td width=150></td>
					</tr>
					<tr>
						<td>&{'repository.modules'}:&nbsp;</td>
						<td>
							#{list items:repository.modules, as:'module'}
							<a href="#" rel="${module.id}" class="button module">${module.name}</a>&nbsp;
							#{/list}
						</td>
					</tr>
				</table>
			</div>
		#{/list}
		</div>
	</div>
</div>

<div id="dialog-delete" title="&{'delete.title'}" class="ui-helper-hidden">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>&{'delmodule.confirm'}</p>
</div>
	
<div class="ui-helper-hidden">
#{form @Modules.show(), id:'module'}
#{/form}
</div>

<form class="ui-helper-hidden" id="action" enctype="multipart/form-data" method="POST" accept-charset="utf-8">
</form>
	
<script type="text/javascript">

$(function() {

	$("#tabs").tabs({
	});
	
	$('.accordion').accordion({
		change : function(event,ui) {
			//var tab = $('#tabs').tabs("option", "selected");
			//$((tab == 0)? 'button.opmod': 'button.oprep').fadeIn('slow');
		},
		autoHeight : false,
		animated : false
	});

	$('.button').button();
	
	$('button.delete').click(function(event) {
		event.preventDefault();
		// Ask confirmation for delete button
		$('#dialog-delete').attr('rel', $(this).attr('rel'));
		$('#dialog-delete').dialog('open');
	});

	function addLayout(form, id) {
		var m = $('#accordion-mod').accordion("option", "active");
		var r = $('#accordion-rep').accordion("option", "active");
		var t = $('#tabs').tabs("option", "selected");
		form.find('input.flash').remove();
		$("<input class='flash' type='hidden' name='m_idx' value='"+m+"'>").appendTo(form);
		$("<input class='flash' type='hidden' name='r_idx' value='"+r+"'>").appendTo(form);
		$("<input class='flash' type='hidden' name='t_idx' value='"+t+"'>").appendTo(form);
		$("<input class='flash' type='hidden' name='id' value='"+id+"'>").appendTo(form);
	}

	function getId(type) {
		var id = null;
		if (type == "new") {
			id = 0;
		} else if ($('#tabs').tabs("option", "selected") == 0) {
			id = $('#accordion-mod div.ui-accordion-content-active:first').attr('rel');
		} else {
			id = $('#accordion-rep div.ui-accordion-content-active:first').attr('rel');
		}
		return id;
	}
	
	$('a.module').click(function() {
		var form = $('form#module'); 
		var id = $(this).attr('rel');
		addLayout(form, id);
		form.submit();
	});
		
	$('.leave').click(function() {
		var form = $(this).parents('form:first');
		var id = getId($(this).attr('id'));
		if (id == null) {
			return false;
		}
		addLayout(form, id);
		form.submit();
	});
	
	$("#dialog").dialog("destroy");

	$("#dialog-delete").dialog({
		resizable: false,
		height: "auto",
		modal: true,
		autoOpen: false,
		buttons: {
			Delete: function() {
				$(this).dialog('close');
				// Send the selected model identifier (value) to the server
				var action = $('#dialog-delete').attr('rel');
				var form = $('form#action'); 
				form.attr('action', action);
				addLayout(form, getId(""));
				form.submit();
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		}
	});

	#{if flash.m_idx}
	$('#accordion-mod').accordion("activate", ${flash.m_idx});
	$('#accordion-rep').accordion("activate", ${flash.r_idx});
	$('#tabs').tabs("select", ${flash.t_idx});
	#{/if}
	
	#{if models.Module.list().isEmpty()}
	$('button.opmod').hide();
	#{/if}
	#{else}
	$('button.opmod').fadeIn('slow');
	#{/else}
	#{if models.Repository.list().isEmpty()}
	$('button.oprep').hide();
	#{/if}
	#{else}
	$('button.oprep').fadeIn('slow');
	#{/else}
});

</script>
